<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
  {
    style: {
      'navigationStyle': 'custom',
      "enablePullDownRefresh": false,
    },
  }
  </route>
<template>
  <view class="page">
    <view class="h-[670rpx] points-header-bg">
      <k-navbar title="我的积分" :fixed="true" :placeholder="true" customClass="points-header-bg"></k-navbar>
      <view class="mt-[38rpx] ml-5">
        <view class="text-[86rpx] text-base">{{ signInfo?.user?.user_integral }}</view>
        <view class="flex items-center mt-[10rpx]">
          <i class="w-[4rpx] h-[4rpx] bg-[#9A9A9A] mr-[12rpx]"></i>
          <text class="text-[#9A9A9A] text-[22rpx]">积分可在购买课程时候抵扣现金</text>
        </view>
      </view>



    </view>

    <view class="page-body">
      <view class="sign-day">
        <view class="text-base text-[30rpx] pt-[10rpx] ml-[10rpx] mb-[20rpx]">本月累计签到{{ signInfo?.user?.continuous_days
        }}天</view>

        <scroll-view v-if="signInfo?.lists && signInfo.lists.length" scroll-x class="w-full  text-[#7A7879]">
          <view class="inline-flex gap-x-[20rpx] ">
            <view
              class="w-[122rpx] h-[156rpx] flex flex-col justify-center items-center bg-[#F4F4F4] border-solid border-[1px] border-[#CECECE] rounded-sm"
              :class="{ 'light': item.is_sign }" v-for="(item, index) in signInfo.lists" :key="index">
              <text class="text-[20rpx]  mb-[14rpx]">{{ formatDateOrToday(item.day) }}</text>
              <wd-img width="40rpx" height="44rpx"
                :src="`/static/images/mine/${item.is_sign ? 'sign-light' : 'sign-dark'}.png`"></wd-img>
              <text class="text-[26rpx] mt-[14rpx]">{{ item.integral }}积分</text>
            </view>

          </view>
        </scroll-view>


        <view class="w-[390rpx] mx-auto mt-5">
          <wd-button :disabled="signInfo?.user?.today_sign" :round="false" :block="true" customClass="w-full"
            @click="handleSign">立即签到</wd-button>
        </view>

      </view>

      <view>
        <wd-tabs v-model="state.curTab" sticky>
          <wd-tab :title="item.name" v-for="item in state.tabList" :key="item.value">
          </wd-tab>
        </wd-tabs>
        <k-list :loading="loading" :isEmpty="!logs.length">
          <view class="flex items-center justify-between border-b-solid border-b-1 border-[#EDEDED] p-4"
            v-for="(item, index) in logs" :key="index">
            <view>
              <view class="text-[#333] text-[30rpx]">{{ item.type_desc }}</view>
              <view class="text-xs text-[#999999] mt-1">{{ item.create_time }}</view>
            </view>
            <view class="text-[40rpx]">{{ item.change_amount_desc }}</view>
          </view>
        </k-list>

      </view>
    </view>


  </view>
</template>

<script setup>
import dayjs from "dayjs";
import { signAction, fetchSignRules, fetchIntegralDetails } from "@/service/user";
import { to } from "@/utils/navigation";
import { showToast } from "@/utils/uni";
import useRequest from "@/hooks/useRequest";
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore";


defineOptions({
  options: {
    styleIsolation: 'shared',
  }
})


const state = ref({
  curTab: 0,
  tabList: [
    {
      name: "积分收入明细",
      value: "integral_inc"
    },
    {
      name: "积分支出明细",
      value: "integral_dec"
    }
  ]
});

const loadLogsParams = computed(() => ({ type: state.value.tabList[state.value.curTab].value }))

const { data: signInfo, run } = useRequest(fetchSignRules, { immediate: true });

const { data: logs, loading, run: loadLogs, params } = useReachBottomLoadMore(fetchIntegralDetails, loadLogsParams);

function formatDateOrToday(inputDate) {
  const date = dayjs(inputDate); // 转换为 dayjs 对象
  const isToday = date.isSame(dayjs(), 'day'); // 判断是否是今天
  return isToday ? '今天' : date.format('MM.DD'); // 返回 "今天" 或格式化日期
}


function handleSign() {
  signAction().then(res => {
    showToast(res.msg);
    run();
  })

}

onLoad(() => {
  loadLogs(params.value);
});

</script>

<style lang="scss" scoped>
.page {
  &-body {
    @apply bg-white relative z-50;
    margin-top: -270rpx;
    border-radius: 30rpx 30rpx 0 0;

    .sign-day {
      padding: 30rpx;
      box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
    }

    .light {
      @apply text-white;
      background: linear-gradient(180deg, #010101 0%, #343434 100%);
    }
  }
}
</style>
